<template>
    <div class="comment-item">
        <adduer-info 
            :data="data"
            class="user"
            :userhead="data.currentauthor.adduserheadportraitpath"
            :username="data.currentauthor.nickname"
        ></adduer-info>

        <div class="text">
            {{data.content}}
        </div>

        <div class="foot">
            <item-tool-bar
                :layout="layout"
                :data="data"
                type="comment"
                :rowguid="data.guid"
                :comment-parent="data.guid"
                @comment="commentSubmitHandler"
                @del="delHandler"
            ></item-tool-bar>
        </div>

        <div 
        v-if="data.sonlist && data.sonlist.length"
        class="sub"
        >
            <sub-list 
                :data="data.sonlist"
                @update="querySonList"
            ></sub-list>
        </div>
    </div>
</template>

<script>
import AdduerInfo from '@components/sys/adduser-info';
import ItemToolBar from '@components/sys/item-tool-bar/index';
import SubList from './sub-list';

import ITEM_MIXINS from '../mixins/item';

export default {
    mixins: [ITEM_MIXINS],
    components: {
        AdduerInfo,
        ItemToolBar,
        SubList,
    },
    props: {
        data: {
            type: Object,
            default: () => ({}),
        },
        objecttype: {
            type: String,
            default: ''
        },
        objectguid: {
            type: String,
            default: ''
        },
    },
    data() {
        return {
            
        };
    },
    methods: {
        querySonList() {
            this.$get(`${this.$store.state.api.tbUrl}/comment/sonpglist.json`, {
                pageindex: 1,
                pagesize: 999,
                groupguid: this.data.groupguid,
            }, data => {
                this.data.sonlist = data.rows;
            });
        },
    },
};
</script>

<style lang="scss" scoped>
    $left: 68px;

    .comment-item {
        padding-bottom: 24px;

        & + .comment-item{
            padding-top: 24px;
            border-top: 1px solid #f0f0f0;
        }

        .user {
            ::v-deep {
                .head {
                    width: 48px;
                    height: 48px;
                }

                .username{
                    font-size: 14px;
                }

                .text{
                    height: 48px;
                    margin-left: $left;
                }
            }
        }

        .text, .foot, .sub{
            margin-left: $left;
        }

        .text{
            color: #666666;
            margin-top: 6px;
            font-size: 14px;
            line-height: 24px;
        }
        
        .foot{
            ::v-deep {
                .btn {
                    float: right;

                    &+.btn{
                        margin-right: 44px;
                    }
                }

                .addtime{
                    float: left;
                }
            }
        }
    }
</style>